﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Product App</title>
</head>
<body>
    <div>
        <h2>用户注册（添加）</h2>
        手机号码：<input type="text" id="PhoneNumber" size="5" />
        <br />
        密码：<input type="text" id="Password" size="5" />
        <br />
        真实姓名：<input type="text" id="RealName" size="5" />
        <br />
        <input type="button" value="注册" onclick="AddUser();" />
        <p id="aa" />
    </div>
    <hr />

    <div>
        <h2>登陆</h2>
        手机号码：<input type="text" id="LoginPhoneNumber" size="5" />
        <br />
        密码：<input type="text" id="LoginPassword" size="5" />
        <br />
        <input type="button" value="登陆" onclick="Login();" />
    </div>
    <hr />

    <div>
        <h2>所有用户</h2>
        <ul id="Users" />
    </div>
    <hr />
    <div>
        <h2>根据ID查找用户</h2>
        <input type="text" id="prodId" size="5" />
        <input type="button" value="查询" onclick="find();" />
        <input type="button" value="查询所有" onclick="FindAll();" />

        <p id="aa" />
    </div>
    <hr />
    <div>
        <lablel>修改用户信息：</lablel>
        <br />
        ID(不可改)<input id="UserID" type="text"/>
        电话号码（不可改）：<input id="phone" type="text">
        真实姓名：<input id="realName" type="text" />
        <input type="button" value="修改"  onclick="ModifyUser();"/>
    </div>
   

    <label>验证码:<img id="valiCode" src="/api/User/GetImage" /></label>
   



    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
    <script>
        var apiHost="http://192.168.1.104:9012/"
        $(document).ready(function () {
            //alert("完成加载");
        });
        jQuery.support.cors = true;//让ajax请求支持跨域
        // 获取验证码
        $.getJSON(apiHost+'api/User/GetImageBase64String')
                .done(function (data)
                {
                    $('#valiCode').attr('src', 'data:image/png;base64,' + data);
                });

        $("#valiCode").bind("click", function () {
            this.src =apiHost+ "/api/User/GetImage?time=" + (new Date()).getTime();
        });
        function formatItem(item) {
            if (item != null) {
                return  item.UserID+"-"+item.PhoneNumber + '-' + item.RealName+"-"+item.Password+"-"+item.CreateDate;
            }
        }



        function find() {
            var id = $('#prodId').val();
            $.getJSON(apiHost + "api/User/GetUser" + '/' + id)
                .done(function (data) {
                    $('#Users').text(formatItem(data));
                })
                .fail(function (jqXHR, textStatus, err) {
                    alert(err);
                    $('#Users').text('Error: ' + err);
                });
        }



        function FindAll()
        {
            $.ajax({
                url: apiHost + "/api/User/GetAllUsers",
                type: "GET",
                cache: false,
                dataType: "json",
                success: function (data) {
                    alert(JSON.stringify(data));
                    $.each(data, function (key, item) {

                        var li = $('<li>', { text: formatItem(item) }).appendTo($('#Users'));
                    });
                },
                error: function (xhr, type) {
                    //请求出错处理
                    alert(type+xhr.statusText+xhr.status+xhr.responseText);
                }
            });


        }

        function AddUser()
        {
            var PhoneNumber = $('#PhoneNumber').val();
            var Password = $('#Password').val();
            var RealName = $('#RealName').val();


            var isMobile=/^(?:13\d|15\d)\d{5}(\d{3}|\*{3})$/;
            var isPhone=/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;

            //if(!isPhone.test(PhoneNumber)) {
            //    alert("请正确填写电话号码，例如:13415764179");
            //    return false;
            //}

            //if (!isMobile.test(PhoneNumber) )
            //{
            //    alert("请正确填写电话号码，0321-4816048");
            //    return false;
            //}
        
        var d = { PhoneNumber: PhoneNumber, Password: Password, RealName: RealName };
        $.ajax({
            type: 'post',
            url: apiHost+"api/User/AddUser",
            dataType: "json",
            contentType: 'text/json',
            cache: false,
            async: true,
            data: JSON.stringify(d),
            success: function (r) {
                alert(r);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert(XMLHttpRequest + textStatus + errorThrown)
            }
        });
        }



        function ModifyUser()
        {
            var phone = $("#hone").val();
            var realName = $('#realName').val()
            var d = { UserID: UserID, PhoneNumber: phone, RealName: RealName }
            $.ajax({
                type: 'post',
                url: apiHost + "api/User/EditUser",
                dataType: "json",
                contentType: 'text/json',
                cache: false,
                async: true,
                data: JSON.stringify(d),
                success: function (r) {
                    alert(r);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    alert(XMLHttpRequest + textStatus + errorThrown)
                }


            });

        }



        function Login()
        {
            var PhoneNumber = $('#LoginPhoneNumber').val();
            var Password = $('#LoginPassword').val();
            var UserID = $("#UserID").val();
            var d = { PhoneNumber: PhoneNumber, Password: Password };
            $.ajax({
                type: 'post',
                url: apiHost + "api/User/Login",
                dataType: "json",
                contentType: 'text/json',
                cache: false,
                async: true,
                data: JSON.stringify(d),
                success: function (r) {
                    if (r.LoginRes) {


                        alert("登陆成功。");
                    }
                    else {
                        alert("登陆失败：" + r.MSG);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    alert(XMLHttpRequest + textStatus + errorThrown)
                }
            });

        }





    </script>
</body>
</html>